<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>RunCode</title>
    <link rel="stylesheet" href="https://weui.io/style/weui.css">
    <script src="https://6d69-minglie-31e331-1302367385.tcb.qcloud.la/js/ming_mock_vue.js"></script>
    <script src="https://minglie.gitee.io/mingpage/static/public/vue/3.2/vue.global.prod.min.js"></script>
</head>

<body>
<div  v-cloak id="main" >
    <div class="container">
        <div class="weui-tab">
            <div class="weui-tab__panel">
                <div class="weui-cells">

                    <template v-for="(item,index) in disList" :key="index">
                        <div class="weui-cell weui-cell_active">
                            <div class="weui-cell__hd profile_photo">
                                {{item.tag}}:
                            </div>
                            <div class="weui-cell__bd disv">
                                {{item.v}}
                            </div>

                            <div v-if="item.tag=='i0'" class="weui-cell__bd">
                                <button @click="u('i(1237,_)')">置1237</button>
                                <button @click="u('i(0,_)')">置0</button>
                            </div>
                            <div v-if="item.tag=='i1'" class="weui-cell__bd">
                                <button @click="u('i(_,5)')">置5</button>
                                <button @click="u('i(_,0)')">置0</button>
                            </div>


                            <div v-if="item.tag=='o0'" class="weui-cell__bd">
                                <button @click="u('o(19)')">置19</button>
                                <button @click="u('o(0)')">置0</button>
                            </div>


                            <div v-if="item.tag=='o1'" class="weui-cell__bd">
                                <button @click="u('o(_,83)')">置83</button>
                                <button @click="u('o(_,0)')">置0</button>
                            </div>

                        </div>
                    </template>
                </div>
            </div>
        </div>
    </div>
</div>
</body>


</html>

<script type="module" >
    const vueConstructorData={
        async mounted() {
            const source = new EventSource('http://localhost:8888/sseServer?clientId=77');
            source.addEventListener('slide', e => {
                let r=  JSON.parse(e.data);
                eval("this."+r.code);
            }, false);
        },
        data() {
            return {
                i: 0,
                f1:0.0,
                disList:[
                    {
                        tag:"i0",
                        v:0
                    },
                    {
                        tag:"i1",
                        v:0
                    },
                    {
                        tag:"o0",
                        v:0
                    },
                    {
                        tag:"o1",
                        v:0
                    }
                ]
            }
        },

        methods:{
            u(m){
                window.M.rawPost("/uartSend",m);
            },

            f(){
                for (let i=0;i<arguments.length;i++){
                    this.disList[i].v=arguments[i];
                }
            }
        }

    }
    const {createApp}=Vue;
    const vueApp= createApp(vueConstructorData);
    vueApp.mount('#main');
</script>



<style>
    *{
        margin: 0;
        padding: 0;
    }

    [v-cloak]{
        display: none;
    }

    li{
        list-style:none;
    }

    .badge {
        position: relative;
        margin-right: 10px;
    }
    .badge img{
        width: 50px;
        display: block;
    }
    .badge span {
        position: absolute;
        top: -0.4em;
        right: -0.4em;
    }
    .profile_photo {
        position: relative;
        margin-right: 10px;
    }
    .profile_photo img {
        width: 50px;
        display: block;
    }

    button{
        width: 10vw;
        height: 5vw;
    }

    .disv{
        font-size: 5vw;
    }
</style>






